<template>
  <div>
        <!-- 打印区域     -->
        <div id="printdiv" style="width: 285px;font-size: 12px;position: relative;">
          <div style="font-weight: bold;position: absolute;top: -48px;left: 5px;">
            <div v-for="item in info['快递单号']">{{ item }}</div>
          </div>

          <div style="width: 255px;border: 1px solid black;margin: 0 auto;">
            <div style="height: 53px;font-size:17px;font-weight: bolder;display: flex;justify-content: center;align-items: center">{{info['路由信息']}}</div>
            <hr style="margin: 0"/>
            <div style="height: 38px;"></div>
            <hr style="margin: 0"/>
            <div style="height: 130px;width: 140px;display: flex; flex-direction: column; justify-content: space-between;">
              <div style="display: flex;align-items: center;gap: 10px;">
                <div style="font-size:20px;font-weight: bolder">收</div><div style="font-weight: bolder">{{info['收件人信息']}}</div>
              </div>
              <div style="font-weight: bolder;">
                {{info['收货人地址']}}
              </div>
            </div>
            <hr style="margin: 0"/>


            <div style="height: 58px;">
              <div style="display: flex;align-items: center;gap: 10px;">
                <div style="font-size:20px;font-weight: bolder">寄</div>
                <div style="font-weight: bolder">{{info['寄件人信息']}}</div>
              </div>
              <div>{{info['寄件人地址']}}</div>
            </div>
            <div style="height: 29px;font-weight: bolder;font-size: 22px;padding-left: 15px;">
              {{info['进港信息']}}
            </div>

          </div>

          <div style="font-weight: bold;position: absolute;top: -48px;right: 5px;">
            <div v-for="item in info['快递单号']">{{ item }}</div>
          </div>
        </div>


    <button @click="print">模板方式打印</button>
    <lodop ref="lodopIframe2ref"></lodop>
  </div>
</template>

<script setup>

import { drawQRCode2, drawBarcode2 } from '../qrcode.js'
import {ref} from 'vue'



const lodopIframe2ref = ref(null)

const info = ref({
  FILENAME: "sfexpress-WMWHSE20-WA236210001-S000012958",
  二维码: "MMM={'k1':'010WE','k2':'010Z125','k3':'013','k4':'T6','k5':'SF1385990307465','k6':'','k7':'df677c25'}",
  产品名称: " ",
  仓库: "WMWHSE20",
  出库单号: "S000012958",
  出港映射码: " ",
  寄件人信息: "北京 ",
  寄件人地址: "浙江省宁波北仑保税南区九龙山路1号中外运仓",
  快运三段码: " ",
  快递单号: "SF1385990307465",
  打印次数: 1,
  收件人信息: "张** 159****4728",
  收货人地址: "北京市北京顺义区顺义区港馨家园8号楼3单元400",
  时效类型: "标快",
  物料信息: "9023/1 ",
  订单总数量: "1",
  订单波次序号: "1/10001",
  路由信息: "010WE-Z125-013",
  进港信息: "3-1",
  标识: "易碎",
  time: '2023-12-12 05:31:44'
})

  let canvas = document.createElement('canvas')
  //文本转base64码条码
  let h = 285
  let height = h * 38 / 270
  let width = 1.7 * h / 270
  let fontsize = h * 16 / 270
  drawBarcode2(canvas, info.value['快递单号'], width, height, fontsize)
  let base64urlBar = canvas.toDataURL()  //条码图片, base64格式

  //文本转base64码二维码
  height = h * 105 / 270
  width = h * 105 / 270
  drawQRCode2(info.value['二维码'], canvas, width, height)
  let base64urlQR = canvas.toDataURL()  //二维码图片, base64格式

const print = ()=>{
  lodopIframe2ref.value.demoPrint(callback, 1)
}

const callback = (LODOP)=>{
  let ysurl = ''
  let html = document.getElementById('printdiv').outerHTML
  let printerObj = info.value
  LODOP.SET_PRINT_PAGESIZE(1, 760, 1300, '')  //纸张设置为76mm*130mm
  // LODOP.ADD_PRINT_RECT(0,0,285,490,0,0);  //76*130
  LODOP.ADD_PRINT_TEXT(0,142,142,50,"电商标快");
  LODOP.SET_PRINT_STYLEA(0,"FontSize",25);
  LODOP.ADD_PRINT_TEXT(37,63,92,23,"客服热线95338");
  LODOP.ADD_PRINT_TEXT(51,89,174,20,"已检视 "+ printerObj.time);
  LODOP.ADD_PRINT_TEXT(455,17,48,20,"总件数");
  LODOP.ADD_PRINT_TEXT(455,115,37,20,printerObj['订单总数量']);
  LODOP.ADD_PRINT_TEXT(455,178,100,20,printerObj['订单波次序号']);
  LODOP.ADD_PRINT_TEXT(470,20,100,20,printerObj['物料信息']);
  LODOP.ADD_PRINT_IMAGE(72,20,245,160,base64urlBar)
  LODOP.ADD_PRINT_IMAGE(188,20,40,40,ysurl)
  LODOP.SET_PRINT_STYLEA(0, 'Stretch', 1)
  LODOP.ADD_PRINT_IMAGE(240,155,110,110,base64urlQR)
  LODOP.ADD_PRINT_HTM(135,0, 300,1100,html);
  LODOP.NEWPAGEA();
}

</script>